import { useState, useEffect, useMemo } from 'react'
import FxqyApi from '../../../../../../../utils/apis/FxqyApi';
import { createLayer, dataToFeature } from '../../../../../../../utils/helper/mapHelper';
import { Fill, Icon, Style } from 'ol/style';
import { resourcePath } from '../../../../../../../utils/resource';
import useMap from '../../hooks/useMap';
import Legend from '../../common/Legend';
import MapPointerMove from '../../common/MapPointerMove';
import JcyjApi from '../../../../../../../utils/apis/JcyjApi';
import useColorLayer from '../useColorLayer';
import LegendPro from '../common/LegendPro';
export default function HuozaiLayer(props) {
    const map = useMap();

    const layer = useMemo(() => {
        const l = createLayer((feature) => {
            return new Style({
                image: new Icon({
                    src: resourcePath.mapIcons.zlhz_blue,
                    scale: resourcePath?.scales?.['zlhz_blue_scale'] || 0.6,
                    anchor: [0.5, 1]
                })
            })
        }, [], {
            zIndex: 99
        });
        return l;
    }, [])
    useEffect(() => {
        if (layer) {
            map.addLayer(layer);
            FxqyApi.yhlx_find1().then(resp => {
                const features = resp.rows?.filter(row => {
                    if (row.yhlb === '火灾') {
                        if (row.geom) {
                            return row.geom
                        } else if (row.geom === null && row.jd != null && row.wd != null) {
                            row.geom = `POINT(${row.jd} ${row.wd})`
                        }
                        //console.log(row)
                        return row.geom
                    } else {
                        return false;
                    }
                })?.map(item => {
                    return dataToFeature(item)
                })

                map.dispatchEvent({
                    type: 'legend-layer',
                    layer,
                    title: '森林火灾',
                    icon: resourcePath.mapIcons.zlhz_blue
                })
                layer.getSource().addFeatures(features);
            });
            return () => {
                map.removeLayer(layer);
            }
        }
    }, [layer, map])

    useColorLayer({ type: '5' })

    return <>
        {/* <Legend /> */}
        <LegendPro />
        <MapPointerMove field={'yhmc'} />
    </>;
}